<template>
    <div class="SCflowWrap">
        <!--流量中心头部-->
        <div class="SCflowTop">
            <span class="SCflowTopLeft">统计时间：2019-07-25 16:27</span>
            <p class="SCflowTopRight">
                <span :class="timeIndex == 1?'SCflowTopRightSpanS':''" @click="timeIndexSelect(1)">今日流量</span>
                <span :class="timeIndex == 2?'SCflowTopRightSpanS':''" @click="timeIndexSelect(2)">昨日流量</span>
                <span :class="timeIndex == 3?'SCflowTopRightSpanS':''" @click="timeIndexSelect(3)">一周流量</span>
                <span :class="timeIndex == 4?'SCflowTopRightSpanS':''" @click="timeIndexSelect(4)">一月流量</span>
            </p>
        </div>
        <!--流量中心下面部分-->
        <div class="SCflowBottom" v-if="isDataList">
            <p class="SCflowBottomOne">流量总览</p>
            <!--三个大块-->
            <div class="SCflowBottomTwo">
                <!----------------------三大块-->
                <div class="BTwoDiv">
                    <div class="BTwoDivLeft">
                        <p>访问店铺</p>
                        <p>今日访客量</p>
                        <p>较前日</p>
                    </div>
                    <div class="BTwoDivRight">
                        <p>508</p>
                        <p>25.51%</p>
                    </div>
                    <img v-if="1 >= 0.25" class="shopCenterUpDown" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="1 < 0.25" class="shopCenterUpDown" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                    <!----三大块的echart表-->
                    <div class="BTwoDivEchart">
                        <div id="echartsOne"></div>
                    </div>
                </div>
                <!----------------------三大块-->
                <div class="BTwoDiv">
                    <div class="BTwoDivLeft">
                        <p>访问店铺</p>
                        <p>今日访客量</p>
                        <p>较前日</p>
                    </div>
                    <div class="BTwoDivRight">
                        <p>508</p>
                        <p>25.51%</p>
                    </div>
                    <img v-if="1 < 0.25" class="shopCenterUpDown" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="1 >= 0.25" class="shopCenterUpDown" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                    <!----三大块的echart表-->
                    <div class="BTwoDivEchart">
                        <div id="echartsTwo"></div>
                    </div>
                </div>
                <!----------------------三大块-->
                <div class="BTwoDiv">
                    <div class="BTwoDivLeft">
                        <p>访问店铺</p>
                        <p>今日访客量</p>
                        <p>较前日</p>
                    </div>
                    <div class="BTwoDivRight">
                        <p>508</p>
                        <p>25.51%</p>
                    </div>
                    <img v-if="1 >= 0.25" class="shopCenterUpDown" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                    <img v-if="1 < 0.25" class="shopCenterUpDown" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                    <!----三大块的echart表-->
                    <div class="BTwoDivEchart">
                        <div id="echartsThree"></div>
                    </div>
                </div>
            </div>
            <!--中间三个小块-->
            <div class="SCflowBottomThree">
                <div class="BThreeDiv">
                    <p class="BThreeDivOne">访客数</p>
                    <p class="BThreeDivTwo">508</p>
                    <p class="BThreeDivThree">
                        <span>较日前</span>
                        <img v-if="1 < 0.1" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                        <img v-if="1 >= 0.1" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                        <span>10.82%</span>
                    </p>
                </div>
                <div class="BThreeDiv">
                    <p class="BThreeDivOne">浏览量</p>
                    <p class="BThreeDivTwo">508</p>
                    <p class="BThreeDivThree">
                        <span>较日前</span>
                        <img v-if="1 < 0.1" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                        <img v-if="1 >= 0.1" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                        <span>10.82%</span>
                    </p>
                </div>
                <div class="BThreeDiv">
                    <p class="BThreeDivOne">人均浏览量</p>
                    <p class="BThreeDivTwo">5</p>
                    <p class="BThreeDivThree">
                        <span>较日前</span>
                        <img v-if="1 >= 0.1" src="./../../assets/img/shopCenter/shopCenterUp.png" alt="">
                        <img v-if="1 < 0.1" src="./../../assets/img/shopCenter/shopCenterDown.png" alt="">
                        <span>10.82%</span>
                    </p>
                </div>
            </div>
            <!--下面的echart表-->
            <div class="SCflowBottomFour">
                <div class="BFourDiv">
                    <span class="BFourDivOne"></span>
                    <span class="BFourDivTwo">今日访客数</span>
                    <span class="BFourDivThree"></span>
                    <span class="BFourDivFour">昨日访客数</span>
                </div>
                <div id="chart_example"></div>
            </div>
        </div>

        <!-- 没有数据 -->
        <div class="noDataList" v-if="!isDataList">
            <img class="noDataListA" src="./../../assets/img/shopCenter/SCflowNoDataList.png" alt="">
            <p class="noDataListB">暂无订单</p>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: "SCflow",
        data(){
            return {
                // 是否有数据
                isDataList: true,
                // 选择流量日期
                timeIndex:1,
            }
        },
        methods: {
            // 选择显示数据的日期
            timeIndexSelect(index){
                this.timeIndex = index;
            }
        },
        mounted(){
            let echartsOne = echarts.init(document.getElementById('echartsOne'),'light');
            let echartsTwo = echarts.init(document.getElementById('echartsTwo'),'light');
            let echartsThree = echarts.init(document.getElementById('echartsThree'),'light');
            let myChart = echarts.init(document.getElementById('chart_example'),'light');
            // 基于准备好的dom，初始化echarts实例
            let option = {
                color: ['#00B7EE', '#FB6451'],

                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {
                    data:['昨日', '今日']
                },
                grid: {
                    // top: 70,
                    // bottom: 50
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: "#00B7EE"
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    // '今日  ' + params.value
                                    return (params.seriesData.length ? '浏览量：' + params.seriesData[0].data : '');
                                }
                            }
                        },
                        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
                    },
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: "#FB6451"
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    // '昨日 ' + params.value
                                    return (params.seriesData.length ? '浏览量：' + params.seriesData[0].data : '');
                                }
                            }
                        },
                        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#DCDCDC']
                            }
                        },
                    }
                ],
                series: [
                    {
                        // name:'昨日',
                        type:'line',
                        xAxisIndex: 1,
                        smooth: true,
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 199.6, 212.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        // name:'今日',
                        type:'line',
                        smooth: true,
                        data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
                    }
                ]
            };
            var optionName = ["echartsOne","echartsTwo", "echartsThree"];
            var optionList = [];
            let optionOne = {
                xAxis: {
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11', '12']
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        data: [11,20,91,82,37,66,55,50,23,12,21,10],
                        type: 'line',
                        symbol: "none",
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#FF8C69'
                                }, {
                                    offset: 1,
                                    color: '#ffffff'
                                }])
                            }
                        },
                    },
                    {
                        data: [0, 11, 23, 63, 54, 95, 56, 67,98, 59, 20, 11],
                        type: 'line',
                        symbol: "none",
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#EEE9E9'
                                }, {
                                    offset: 1,
                                    color: '#ffffff'
                                }])
                            }
                        },
                    }
                ]
            };


            // 使用刚指定的配置项和数据显示图表。
            echartsOne.setOption(optionOne);
            echartsTwo.setOption(optionOne);
            echartsThree.setOption(optionOne);
            myChart.setOption(option);
        }
    }
</script>

<style scoped>

    /* 头部 */
    .SCflowTop{
        width:960px;
        height:33px;
        line-height: 33px;
        font-size: 14px;
        font-weight: 400;
        background: #ffffff;
        padding: 0 28px;
        margin-bottom: 15px;
    }
    .SCflowTopLeft{
        color: #1296DB;
    }
    .SCflowTopRight{
        height:33px;
        color: #000000;
        float: right;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .SCflowTopRight span{
        display: inline-block;
        width: 80px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
    }
    .SCflowTopRight span:hover{
        display: inline-block;
        width: 80px;
        height: 25px;
        color: #FB6451;
        line-height: 25px;
        text-align: center;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
    }
    /* 选中的日期 */
    .SCflowTopRight .SCflowTopRightSpanS{
        color: #FB6451;
    }
    /* 下面中心大块内容 */
    .SCflowBottom{
        width:1016px;
        height:761px;
        background:#ffffff;
    }
    /* 标题 */
    .SCflowBottomOne{
        height: 42px;
        line-height: 42px;
        text-indent: 28px;
        color: #000000;
        font-size: 19px;
        font-weight: 400;
        border-bottom:1px solid #FB6451;
    }
    .SCflowBottomTwo{
        height: 195px;
        margin: 30px 28px 20px;
        display: flex;
        justify-content: space-between;
    }
    /* 三大块最外层 */
    .BTwoDiv{
        width:300px;
        border:1px solid #B5B5B5;
        border-top: 5px solid #FB6451;
        position: relative;
        overflow: hidden;
    }
    .BTwoDivLeft{
        float: left;
    }
    .BTwoDivLeft p:nth-child(1){
        color: #1E1E1E;
        font-size:17px;
        font-weight:bold;
        line-height: 40px;
    }
    .BTwoDivLeft p{
        font-size:11px;
        text-indent: 15px;
        font-weight:bold;
        color:rgba(135,135,135,1);
        line-height:19px;
    }
    .BTwoDivRight{
        float: right;
    }
    .BTwoDivRight p:nth-child(1){
        font-size:32px;
        font-weight:bold;
        color:rgba(0,0,0,1);
        line-height:40px;
        margin-top: 22px;
    }
    .BTwoDivRight p{
        font-size:13px;
        margin-right: 35px;
        font-weight:bold;
        color:rgba(135,135,135,1);
    }
    .shopCenterUpDown{
        position: absolute;
        right: 30px;
        top: 62px;
        width: 11px;
        height: 15px;
    }
    /* echarts的位置 */
    .BTwoDivEchart{
        width:340px;
        height: 110px;
        position: absolute;
        bottom: 50px;
        left: -55px;
    }
    /* echarts的大小 */
    #echartsOne, #echartsTwo, #echartsThree{
        width:410px;
        height: 220px;
    }
    /* 中间三个小块 */
    .SCflowBottomThree{
        height: 84px;
        margin: 0 28px 0;
    }
    .BThreeDiv{
        float: left;
        height: 64px;
        width: 157px;
        padding: 10px;
        border:1px solid rgba(181,181,181,1);
        border-right:none;
    }
    .SCflowBottomThree .BThreeDiv:nth-child(3){
        border-right:1px solid rgba(181,181,181,1);
    }
    .BThreeDivOne{
        font-size:12px;
        font-weight:bold;
        color:rgba(135,135,135,1);
    }
    .BThreeDivTwo{
        font-size:21px;
        font-weight:bold;
        color:rgba(30,30,30,1);
        line-height:35px;
    }
    .BThreeDivThree{
        font-weight:300;
        color:rgba(135,135,135,1);
        line-height:13px;
    }
    .BThreeDivThree span{
        font-size: 10px;
        -webkit-transform: scale(0.85);
    }
    .BThreeDivThree span:nth-child(3){
        float: right;
    }
    .BThreeDivThree img{
        display: inline-block;
        float: right;
        width: 8px;
        height: 11px;
    }
    /* 下面的echarts大表 */
    .SCflowBottomFour{
        margin-top: 60px;
        position: relative;
        top: -5px;
        left: -60px;
    }
    #chart_example{
        width: 1150px;
        height: 350px;
    }
    .BFourDiv{
        position: absolute;
        left: 90px;
        top: -10px;
    }
    .BFourDivOne{
        display: inline-block;
        width:11px;
        height:11px;
        background:#00B7EE;
    }
    .BFourDivTwo{
        font-size:14px;
        font-weight:bold;
        color:rgba(0,0,0,1);
        line-height:24px;
        margin-right: 70px;
    }
    .BFourDivThree{
        display: inline-block;
        width:11px;
        height:11px;
        background:#FB6451;
    }
    .BFourDivFour{
        font-size:14px;
        font-weight:bold;
        color:rgba(0,0,0,1);
        line-height:24px;
    }

    /* 无数据框 */
    .noDataList{
        width:1016px;
        height:809px;
        background:rgba(255,255,255,1);
        text-align: center;
    }
    .noDataListA{
        width: 300px;
        height: 232px;
        margin: 185px auto 0;
    }
    .noDataListB{
        font-size:16px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        color:rgba(0,0,0,1);
        line-height:50px;
        text-shadow:0px 7px 98px rgba(145,34,0,0.4);
    }

</style>
